Vue.js 3
 By Example by John Au-Yeung

Author:John Au-Yeung
Language: eng
Format: epub
Publisher: Packt Publishing Pvt. Ltd
Published: 2021-04-23T00:00:00+00:00

Working on the setup method

Next, we will start working on the setup() method and add the reactive and computed properties to it. We will also add the watchers, which let us watch for route changes. First, we will write the following code:

<script lang="ts">

...

export default {

...

setup() {

const amount = ref(0);

const fromCurrency = ref("USD");

const toCurrency = ref("CAD");

const result = ref(0);

const currencies = reactive(currenciesArray);

const store = useStore();

const route = useRoute();

...

return {

amount,

fromCurrency,

toCurrency,

currencies,

fromCurrencies,

toCurrencies,

amountValid,

calculate,

result,

addToHistory,

};

},

};

</script>

We call the useStore() method to return the store object, which contains the Vuex store. We need the Vuex store to commit mutations, which lets us add entries to our history. Because we will add the vuex-persistsedstate plugin to our Vuex store, the history entries will be added to local storage automatically. Similarly, we call the useRoute function to return the route object, which lets us get access to the route object. We need the route object to let us watch the query string for the id query parameter. If we find an item by their ID, then we can set the fromCurrency, toCurrency, and amount values by using their values from the Vuex store, which we get from local storage.

Also, we call the ref function to create the amount reactive properties, which are number values. The fromCurrency and toCurrency reactive properties are string values and they contain the currency code of the currency that we choose. The currencies reactive property is a reactive array that is set to currenciesArray as its initial value. The arguments that we pass into ref and reactive are the initial values for each reactive property.

Next, we can add the computed properties by writing the following code:

<script lang="ts">

...

export default {

...

setup() {

...

const fromCurrencies = computed(() => {

return currencies.filter(

({ abbreviation }) => abbreviation !==

toCurrency.value

);

});

...

return {

amount,

fromCurrency,

toCurrency,

currencies,

fromCurrencies,

toCurrencies,

amountValid,

calculate,

result,

addToHistory,

}; },

};

</script>

We call the computed function with a callback to create the computed property. Like with the options API, we return the value that we want for the computed property. The only thing that's different is that we get the value of a primitive value reactive property with the value property. The fromCurrencies reactive property is created by filtering the currencies entry with the abbreviation that has the same value as toCurrency. toCurrencies is created by filtering the currencies entry with the abbreviation value, which is the same as the value of fromCurrency.

The amountValid computed property lets us determine whether the amount that's entered inside ion-input is valid. We want it to be a number that's at least 0, so we return that condition so that we can check for this.

Next, we will add these methods to our CurrencyConverter component by adding more items to the setup() method:

<script lang="ts">

...

export default {

...

setup() {

...

const addToHistory = (entry: CurrencyConversion) =>

store.commit("addToHistory", entry);

const calculate = async () => {

result.value = 0;

if (!amountValid.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.